<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>创建诊所-诊所信息</title>
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/mui.min.css" />
		<link rel="stylesheet" href="../../../css/mui.picker.min.css" >
		<link rel="stylesheet" href="../../../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/sale/clinci/createQuali.css" />
		<link rel="stylesheet" href="../../../css/sale/clinci/createClinic.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<body>
		<div class="mui-content" id="createDocter" v-cloak>
			<div class="mui-slider">
				<nav class="topNav">
			    	<ul>
			    		<li><a href="#clinicInfo" :class="{'highlight':titleShow}">诊所信息</a></li>
			    		<li><i class="iconfont icon-chakangengduo" ></i></li>
			    		<li><a href="#doctorInfo" :class="{'highlight':!titleShow}">医生信息</a></li>
			    	</ul>
			    </nav>
			  <div class="itemGroup">
			      <!-- 具体内容 -->
			      <div id="item1" :class="{'hidden':modelHide}">
				    <div class="panel">
				    	<ul class="mui-table-view mianInfo" >
						    <li class="mui-table-view-cell">诊所名称<input type="text" v-model="clinName" /></li>
						    <li class="mui-table-view-cell">诊所编码<input type="text" v-model="clinCode" /></li>
						    <li class="mui-table-view-cell">医院结算比率<input type="number" v-model="settleRatio" /></li>
						    <li class="mui-table-view-cell">许可证号<input type="text" v-model="licenseNo" /></li>
						    <li class="mui-table-view-cell">许可证地址<input type="text" v-model="licenseAddress" /></li>
						    <li class="mui-table-view-cell" @tap="selectExpire">许可证到期时间<input type="text" v-model="licenseExpiredDateString" readonly unselectable="on"/>
						    	<span ><i class="icon iconfont icon-date right"></i></span>
						    </li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectAdress">诊所地址<input type="text" v-model="addressList" placeholder="(选择地区)" readonly unselectable="on" />
						    	<span class="right" ><i class="iconfont icon-chakangengduo"></i></span>
						    </li>
							<li class="mui-table-view-cell addDetail">
								<input type="text" name="" v-model="address" placeholder="详细地址(如街道、小区、乡镇、村)" />
							</li>
							<li class="mui-table-view-cell" @tap="selectLab">实验室名称<input type="text" v-model="labName" placeholder="(选择实验室)" readonly unselectable="on"/>
						    	<span ><i class="icon iconfont icon-chakangengduo right"></i></span>
						    </li>
							<li class="singleListItem5">
								<div>请上传医疗机构执业许可证</div>
								<ul>
									<li v-for="src in imgSrcs">
										<img :src="src" alt="执业许可证" />
									</li>
									<li @tap="uploadImg"><i class="icon iconfont icon-xiangji1"></i></li>
								</ul>
							</li>
				    	</ul>
				    </div>
				    <div class="nextBtn">
				    	<button v-show="btnShow" class="btn-light" @tap="next">下一步 填写诊所信息</button>
				    	<button v-show="!btnShow" class="btn-gray">下一步 填写诊所信息</button>
				    </div>
			      </div>
			    <div id="item2" :class="{'hidden':!modelHide}">
				    <div class="panel">
				    	<ul class="mui-table-view mianInfo" >
						    <li class="mui-table-view-cell">
						    	<span class="tips">姓名</span>
						    	<input type="text" v-model="doctorName" @keyup="getDoctorInput"/></li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectSex">
						    	<span class="tips">性别</span>
						    	<input type="text" v-model="sexMsg" @keyup="getDoctorInput" readonly unselectable="on"/><span  class="right"><i class="iconfont icon-chakangengduo"></i></span></li>
						    <li class="mui-table-view-cell ">
						    	<span class="tips">联系电话</span>
						    	<input type="tel" v-model="phone" @keyup="getDoctorInput"></li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectClinLeader">
						    	<span class="tips">医生科室</span>
						    	<input type="text" v-model="clinLeader" @keyup="getDoctorInput" readonly unselectable="on" /><span class="right" ><i class="iconfont icon-chakangengduo"></i></span></li>
						    <!--<li class="mui-table-view-cell singleListItem3" @tap="selectClinYear">
						    	<span class="tips">从业年限</span>
						    	<input type="text" v-model="clinYearMsg" @keyup="getDoctorInput" readonly unselectable="on" /><span class="right" ><i class="iconfont icon-chakangengduo"></i></span></li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectGoodDisease">
						    	<span class="tips">擅长病种</span>
						    	<input type="text" v-model="goodDisease" @keyup="getDoctorInput" readonly unselectable="on" /><span class="right" ><i class="iconfont icon-chakangengduo"></i></span></li>		    -->
						</ul>
				    </div>
					<p class="panel intro">
				    	简介<textarea rows="5" cols="5" placeholder="可输入你的专长、经历或荣誉等" v-model="proprietorSummary" @keyup="getDoctorInput"></textarea>
				    </p>	
				    <p class="nextBtn">
				    	<button v-show="submitShow" class="btn-light " @tap="submit">提交</button>
				    	<button v-show="!submitShow" class="btn-gray ">提交</button>
				    </p>
			    </div>
			  </div>
			</div>
			<div id="successSubmit" v-show="show4">
				<ul>
					<li class="item1">
						<i class="icon iconfont icon-xuanzhong1"></i>
					</li>
					<li class="item2">提交成功</li>
					<li class="item3">提交成功后将自动返回首页</li>
				</ul>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script src="../../../js/city.data-3.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/cmms.js?time=333"></script>
		<script>
			new Vue({
				el:"#createDocter",
				data:{
					clinName:'',
					clinCode:'',
					licenseNo:'',
					settleRatio:1,
					labId:0,
					labName:'',
					labs:[],
					address:'',
					licenseAddress:'',//许可证地址
					imgIds:[],
					imgSrcs:[],
					addressList:'',
					addressArr:{
						provinceCode:'',//省编号
						provinceName:'',//省名称
						cityCode:'',//城市编号
						cityName:'',//城市名
						areaName:'',//区名
						areaCode:''//区编码
					},
					licenseExpiredDateString:'',//许可证到期时间
					doctorName:'',
					sexMsg:'',//性别显示
					sexValue:'',//性别1：女，2：男
					clinLeader:'',
					clinLeaderCode:0,
					clinLeaders:[],//科室集合
					clinYear:'',
					clinYearMsg:'',//从业年限页面显示
					goodDisease:'',
					phone:'',
					proprietorSummary:'',
					isShow:false,
					titleShow:true,//标题切换
					modelHide:false,//主体切换
					btnShow:false,//按钮显示
					submitShow:false,//提交按钮显示
					str:'',
					ClinLeaderStr:'',
					show4:false
				},
				watch:{
					clinName:'judegeIsNull',
					licenseNo:'judegeIsNull',
//					settleRatio:'judegeIsNull',
					labId:'judegeIsNull',
					licenseAddress:'judegeIsNull',
					addressList:'judegeIsNull',
					licenseExpiredDateString:'judegeIsNull',
					imgIds:'judegeIsNull',
					address:'judegeIsNull',
					doctorName:'getDoctorInput',
					sexMsg:'getDoctorInput',
					phone:'getDoctorInput',
					clinLeader:'getDoctorInput',
//					clinYear:'getDoctorInput',
//					goodDisease:'getDoctorInput'
				},
				mounted(){
//					var vConsole = new VConsole();
					this.muiInit();
				},
				methods:{
					muiInit(){
						let _this = this;
						mui('.mui-slider-group').scroll({
							indicators: true //是否显示滚动条
						});
						AT.muiAjax('/partner-sale/partnerSale/wxConfig','post',{url:location.href.split('#')[0]},function(res){
							wx.config({
								appId:res.appId,
								timestamp:res.timestamp,
								nonceStr:res.nonceStr,
								signature:res.signature,
								jsApiList:['chooseImage','uploadImage']
							});
						});
						/*实验室*/
						AT.muiAjax('/partner-sale/partnerSale/partnerLabs','post',{},function(res){
							console.log(res);
							_this.labs=res;
							_this.labName=res[0].labName;
							_this.labId=res[0].labId;
							console.log(_this.labs);
						});
						/*科室*/
						AT.muiAjax('/common/common/selectDictDataListByDictCode','post',{
							typeCode: "hospital_offices"
						},function(res){
							console.log(res);
							_this.clinLeaders = res;
							_this.clinLeader = res[0].name;
							_this.clinLeaderCode = res[0].code;
						})
					},
					judegeIsNull(){
						let _this = this;
						
						if((_this.clinName.length>=1)&&( _this.licenseNo.length>=1)&&( _this.imgIds.length>=1)&&( _this.licenseAddress.length>=1)&&( _this.licenseExpiredDateString.length>=1)&&( _this.addressList.length>=1)&&( _this.address.length>=1)&&( _this.labName.length>=1)){
							_this.btnShow = true;
						}else{
							_this.btnShow = false;
						}
					},
					next(){
						let _this = this;
						if(_this.settleRatio>1||_this.settleRatio<0){
							mui.alert("医院结算比率必须是0-1之间");
						}else{
							_this.titleShow = false;
							_this.modelHide = true;
						}
					},
					
					/*上传图片*/
					uploadImg(){
						let _this=this;
						wx.chooseImage({
							count: 1, // 默认9
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
							success: function (res) {
								let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
								_this.imgSrcs.push(localIds[0]);
								//alert(_this.imgSrcs);
								wx.uploadImage({
									localId: localIds[0], 
									isShowProgressTips: 1, 
									success: function (res) {
										var serverId = res.serverId; 
										_this.imgIds.push(serverId);
										//alert(_this.imgIds);
									}
								});
							}
						});
					},
					/*许可证到期时间*/
					selectExpire(){
						let _this = this;
						var nowDate = new Date();
						let y = nowDate.getFullYear();
						var dtpicker = new mui.DtPicker({
							type:'date',
							beginYear:y-15,
							endYear:y+15
						});
						dtpicker.show(function(e) {
//						    console.log(e);
							_this.licenseExpiredDateString = e.value;
//							console.log(_this.licenseExpiredDateString);
							dtpicker.dispose();
						}) ;
					},
					selectAdress(){
						let _this =this;
						var picker = new mui.PopPicker({
						    layer: 3
						});
						let address = [];
					    picker.setData(cityData3);
						picker.pickers[0].setSelectedIndex(1);
						picker.pickers[1].setSelectedIndex(1);
						picker.pickers[2].setSelectedIndex(1);
						picker.show(function(SelectedItem) {
							console.log(SelectedItem);
							/*省市区显示*/
							_this.addressList = SelectedItem[0].text+' '+SelectedItem[1].text+' '+(SelectedItem[2].text?SelectedItem[2].text:'');
							console.log(_this.addressList);
							/*省市区的名称和编号*/
							_this.addressArr.provinceCode=SelectedItem[0].value;
							_this.addressArr.provinceName=SelectedItem[0].text;
							_this.addressArr.cityCode=SelectedItem[1].value;
							_this.addressArr.cityName=SelectedItem[1].text;
							_this.addressArr.areaCode=SelectedItem[2].value;
							_this.addressArr.areaName=SelectedItem[2].text;
							picker.dispose();
						});
					},
					/*选择实验室*/
					selectLab(){
						let _this = this;
						var picker = new mui.PopPicker();
//						AT.muiAjax('/partner-sale/partnerSale/partnerLabs','post',{},function(res){
//							console.log(res);
							let str = [];
							for (let i = 0; i < _this.labs.length; i++) {
							     let obj = {
							         value: _this.labs[i].labId,
							         text: _this.labs[i].labName,
							     };
							     str.push(obj);
							     console.log(obj);
							}
							console.log(str);
							picker.setData(str);
							picker.show(function (selectItems) {
							    _this.labName=selectItems[0].text;
							    _this.labId=selectItems[0].value;
							})
//						});
						
					},
					/*性别选择*/
					selectSex(){
						let _this = this;
						var picker = new mui.PopPicker();
						picker.setData([{value:'1',text:'女'},{value:'2',text:'男'}]);
						picker.show(function (selectItems) {
						    _this.sexMsg=selectItems[0].text;
						    _this.sexValue=selectItems[0].value;
						})
					},
					/*医生科室*/
					selectClinLeader(){
						let _this = this;
						var picker = new mui.PopPicker();
						
						let str = [];
						for (let i = 0; i < _this.clinLeaders.length; i++) {
						     let obj = {
						         value: _this.clinLeaders[i].code,
						         text: _this.clinLeaders[i].name,
						     };
						     str.push(obj);
						     console.log(obj);
						}
						console.log(str);
						picker.setData(str);
						picker.show(function (selectItems) {
						    _this.clinLeader = selectItems[0].text;
						    _this.clinLeaderCode = selectItems[0].value;
						})
					},
					
					/*擅长病种*/
//					selectGoodDisease(){
//						let _this = this;
//						var picker = new mui.PopPicker();
//						picker.setData([
//							{value:'1',text:'胃病'},
//							{value:'2',text:'肝病'},
//							{value:'3',text:'肠病'},
//							{value:'4',text:'消化道疾病'},
//							]);
//						picker.show(function (selectItems) {
//							_this.str += selectItems[0].text+',';
////							console.log(_this.str);
//							_this.goodDisease = _this.str.slice(0,-1)
////							console.log(_this.goodDisease);
//						})
//					},
					/*从业年限*/
//					selectClinYear(){
//						let _this = this;
//						var picker = new mui.PopPicker();
//						picker.setData([
//							{value:'1',text:'1年'},
//							{value:'2',text:'2年'},
//							{value:'3',text:'3年'},
//							{value:'4',text:'4年'},
//							{value:'5',text:'5年'},
//							{value:'6',text:'6年'},
//							{value:'7',text:'7年'},
//							{value:'8',text:'8年'},
//							{value:'9',text:'9年'},
//							{value:'10',text:'10年'},
//							{value:'11',text:'11年'},
//							{value:'12',text:'12年'},
//							{value:'13',text:'13年'},
//							{value:'14',text:'14年'},
//							{value:'15',text:'15年'},
//							{value:'16',text:'16年'},
//							{value:'17',text:'17年'},
//							{value:'18',text:'18年'},
//							{value:'19',text:'19年'},
//							{value:'20',text:'20年'},
//							]);
//						picker.show(function (selectItems) {
//							_this.clinYear = selectItems[0].value;
//							_this.clinYearMsg = selectItems[0].text;
////							console.log(_this.clinYear);
//						})
//					},
					getDoctorInput(){
						let _this = this;
						if((_this.doctorName.length<1)||( _this.sexMsg.length<1)||( _this.phone.length<1)||( _this.clinLeaderCode.length<1)){	
							_this.submitShow = false;
						}else{
							_this.submitShow = true;
						}
					}, 
					submit(){
						let _this = this;
//						_this.submitShow = false;
						AT.muiAjax('/partner-sale/partnerSale/createClinic','post',{
							address: _this.address,
							settleRatio:_this.settleRatio,
							labId:_this.labId,
						  	areaCode: _this.addressArr.areaCode,
						  	areaName: _this.addressArr.areaName,
						  	cityCode: _this.addressArr.cityCode,
						  	cityName: _this.addressArr.cityName,
						  	licenseAddress: _this.licenseAddress,
						  	licenseExpiredDate: _this.licenseExpiredDateString,
						  	licenseNo: _this.licenseNo,
						  	barcode:_this.clinCode,
						  	name: _this.clinName,
//						  	proprietorDisease: _this.goodDisease,
						  	proprietorMobile: _this.phone,
						  	proprietorName: _this.doctorName,
						  	proprietorSex: _this.sexValue,
//						  	proprietorSinceYear: _this.clinYear,
						  	proprietorSubject: _this.clinLeaderCode,
						  	proprietorSummary: _this.proprietorSummary,
						  	provinceCode: _this.addressArr.provinceCode,
						  	provinceName: _this.addressArr.provinceName,
						  	wxAttachmentIds: _this.imgIds
						},
						function(res){
							_this.show4=true;
							setTimeout(()=>{
								_this.show4 = false;
								location.href='../index.html';
							},1500)	
						})
					}
				}
			})
		</script>
	</body>
</html>
